<template>
  <el-row :gutter="20" class="mt-10 grid">
    <div class="justify-self-center">
      <el-divider direction="vertical"></el-divider>
      <span class="cursor-pointer" @click="changeShow(index)" :class="{'font-bold':showList[index]}" v-for="(item, index) in courseList">{{ item.CurriculumSeriesName }}<el-divider
          direction="vertical"></el-divider> </span>
    </div>

      <div v-for="(item, index) in courseList">
        <transition
            name="course-conversion"
        enter-active-class="animate__animated animate__fadeIn"
        >
        <div class="grid cursor-pointer shadow-xl m-20" style="background-color: #f4f4f8" v-if="showList[index]"
        >
          <h1 class="justify-self-center cursor-pointer"  @click="toDetail(item)">{{ item.CurriculumSeriesName }}</h1>
          <div class="ql-editor" v-html="item.CurriculumSeriesDescribe">
          </div>
        </div>
        </transition>
      </div>



    <!--        <el-col-->
    <!--            v-for="(item, index) in courseList"-->
    <!--            :span="8"-->
    <!--        >-->
    <!--          <el-card :body-style="{ padding: '0px' }">-->
    <!--            <div style="padding: 14px">-->
    <!--              <span>{{ item.CurriculumSeriesName }}</span>-->
    <!--              <div class="bottom">-->
    <!--                <p v-html="item.CurriculumSeriesDescribe" ></p>-->
    <!--                <el-button type="primary" @click="toDetail(item)" class="button">进入</el-button>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </el-card>-->
    <!--        </el-col>-->
  </el-row>
</template>

<script>
import axios from "axios";

export default {
  name: "courseList",
  created() {
    axios.post("/api/open/GeyCurriculumSeries").then((res) => {
      if (res.status === 200) {
        this.courseList = res.data
        for (let i = 0; i < this.courseList.length; i++) {
          this.showList.push(false)
        }
        this.showList[0] = true
      }
    })
  },
  data() {
    return {
      courseList: [{
        "ID": "1466981190417256448",
        "CreatedAt": "2021-12-04T12:02:25.647+08:00",
        "UpdatedAt": "2021-12-04T12:02:25.647+08:00",
        "DeletedAt": null,
        "CurriculumSeriesName": "测试课程",
        "CurriculumSeriesDescribe": "<h1>dwad</h1>"
      },],
      showList: []
    }
  },
  methods: {
    changeShow(index) {
      for (let i = 0; i < this.courseList.length; i++) {
        this.showList[i] = false
      }
      this.showList[index] = true
    },
    toDetail(item) {
      this.$sestor.pushByNameResId('courseDetail',item)
      // this.$router.push({name: 'courseDetail', query:{resId:}})
    }
  }
}
</script>

<style scoped>

</style>